<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>管理员登录</title>
  <style>
    *{margin: 0;padding:0;font-size: 16px;}
    .center{
      width: 1000px;
      margin: auto;
      background-color: yellowgreen;
    }
    .login{
      width: 200px;
      margin: auto;
    }
    .login input{
      width: 100%;
      border: none;
      font-size: 12px;
    }
  </style>
</head>
<body>
<div class="center">
  <div class="login">
    <h4>管理员登录</h4>
    <input type="text" id="names" placeholder="管理员登录名">
    <input type="password" id="pwd" placeholder="管理员登录密码">
    <button id="btn">登录</button>
    <div id="show"></div>
  </div>
</div>

  <script>
    var names = document.getElementById('names')
    var pwd = document.getElementById('pwd')
    var btn = document.getElementById('btn')
    var show = document.getElementById('show')
    btn.onclick = function () {
      var namesval=names.value 
      var pwdval=pwd.value
      var xhr = new XMLHttpRequest()
      xhr.onreadystatechange = function(){
        if (xhr.readystate == 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            var result = JSON.parse(xhr.responseText)
            console.log(result)
            if(result.code==1){
              alert('登录成功')
              show.innerHTML=`<a href="#">跳转到管理员查询用户信息</a>`
            }else{
              alert('登录失败')
            }
          }
        }
      }
      xhr.open('POST','/admin/login',true)
      xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
      xhr.send(`anames=${namesval}&apwd=${pwdval}`)
    }
  </script>
</body>

</html>